import type { FC } from 'react'
import { useState } from 'react'

type IProps = {
  checkActive: (avtive: string) => void
  onClear: () => void
}

export const TodoFooter: FC<IProps> = (props) => {
  const [active, steActive] = useState(1)
  const { checkActive, onClear } = props
  const activeList = [
    {
      id: 1,
      pust: '#/all',
      name: 'All'
    },
    {
      id: 2,
      pust: '#/active',
      name: 'Active'
    },
    {
      id: 3,
      pust: '#/completed',
      name: 'Completed'
    }
  ]
  function onClick(id: number, name: string) {
    steActive(id)
    checkActive(name)
  }
  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>{0}</strong> item left
      </span>
      <ul className="filters">
        {activeList.map((item) => (
          <li key={item.id}>
            <a
              className={[active === item.id ? 'selected' : ''].join()}
              href={item.pust}
              onClick={() => onClick(item.id, item.name)}
            >
              <span>{item.name}</span>
            </a>
          </li>
        ))}
      </ul>
      <button className="clear-completed" onClick={onClear}>
        Clear completed
      </button>
    </footer>
  )
}
